<template>
  <div class="recommend-people-wrap">
    <div class="recommend-search-con">
      <img src="./location.png" class="search-pic1" onclick="return false"/>
      <span class="search-city" @click="openCity">{{address}}</span>
      <div class="search-con">
        <img src="./search.png" class="search-pic2" onclick="return false"/>
        <span class="search-name" @click="openSearch">请输入企业名称</span>
      </div>
    </div>

    <div class="recommend-content-box" ref="wrapper" v-if="showData == 1">
      <div class="recommend-content-list">

        <div class="recommend-content-item" v-for="(item,index) in recommendList" :key="index"
             v-if="recommendList.length">
          <img :src="item.mechanismUrl" class="company-pic2" v-if="item.mechanismUrl"/>
          <span class="company-pic1" v-else></span>
          <div class="company-con-box">
            <span class="company-name">{{item.mechanismName}}</span>
            <span class="company-post">{{item.workTypeName}}</span>
          </div>

          <div class="recommend-pic-box" @click="recommendCompany(item.id)" v-if="item.recommendType == 0" >
            <img src="./message.png" class="company-pic3" onclick="return false"/>
          </div>
          <span class="recommend-text" v-if="item.recommendType == 1">已推荐</span>
        </div>

        <div class="recommend-more-box" v-if="noMoreData && showData == 1">没有更多了~</div>

      </div>
    </div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env";
  import {getDeviceRatio} from "../../../config/util";
  import BScroll from 'better-scroll';
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  };

  export default {
    inject: ['reload'],
    data() {
      return {
        address: "",
        showData: 0,
        recommendList: [],
        recommendScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        userSign: "",
        mechanismName: "",
        userId: this.$route.query.userId,
        inviteType: this.$route.query.inviteType,
        affiliationId: this.$route.query.affiliationId
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));

      this.address = this.$route.query.city;
      if (this.address == "" || this.address == undefined || this.address == null) {
        this.address = "全国";
      }
    },
    mounted() {
      this.queryRecommend();
    },
    methods: {
      queryRecommend() {
        this.$vux.loading.show({
          text: '加载中',
        });

        let time = (new Date()).getTime();
        let url = baseUrl + "/work/get_work_mechanism_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/work/get_work_mechanism_list?sgin=" + this.userSign + "&userId=" + this.userId + "&mechanismName=" + this.mechanismName + "&mechanismAddress=" + (this.address == "全国" ? "china" : this.address) + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.showData = 1;
              this.recommendList = resultObj.data;

              this.$nextTick(() => {
                this.initScroll();
                this.recommendScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.recommendScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let time = (new Date()).getTime();
          let url = baseUrl + "/work/get_work_mechanism_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/work/get_work_mechanism_list?sgin=" + this.userSign + "&userId=" + this.userId + "&mechanismName=" + this.mechanismName + "&mechanismAddress=" + (this.address == "全国" ? "china" : this.address) + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resultObj = res.data;
              if (resultObj.code == 0) {
                if (resultObj.data.length > 0) {
                  this.recommendList = this.recommendList.concat(resultObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resultObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.recommendScroll) {
          this.recommendScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.recommendScroll.refresh();
        }
      },
      enable() {
        this.recommendScroll && this.recommendScroll.enable()
      },
      refresh() {
        this.recommendScroll && this.recommendScroll.refresh()
      },
      finishPullUp() {
        this.recommendScroll && this.recommendScroll.finishPullUp()
      },
      openCity() {
        this.$router.push({
          path: "/addresstree",
          query: {"userId": this.userId, "inviteType": this.inviteType, "affiliationId": this.affiliationId}
        });
      },
      openSearch() {
        this.$router.push({
          path: "/searchRecommend",
          query: {"userId": this.userId, "inviteType": this.inviteType, "affiliationId": this.affiliationId}
        });
      },
      recommendCompany(workId) {//推荐
        let time = (new Date()).getTime();
        let url = baseUrl + "/invite/send_mechanism?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/invite/send_mechanism?sgin=" + this.userSign + "&id=" + this.affiliationId + "&type=" + this.inviteType + "&workId=" + workId + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("推荐失败，请重试", "middle");
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      }
    },
    watch: {
      recommendList() {
        this.$nextTick(() => {
          this.recommendScroll.refresh();
        })
      }
    },
    components: {
      BScroll
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .recommend-people-wrap
    wh(100%, auto)
    background: #f2f2f2
    .recommend-search-con
      position: fixed
      top: 0
      z-index: 99
      display: flex
      align-items: center
      wh(100%, 1.2rem)
      background: #3CAFFF
      .search-pic1
        margin-left: 0.28rem
        margin-right: 0.107rem
        wh(0.48rem, 0.48rem)
      .search-city
        margin-right: 0.387rem
        size-color(0.413rem, rgba(255, 255, 255, 1))
        font-weight: 500
      .search-con
        display: flex
        align-items: center
        flex: 1
        margin-right: 0.32rem
        height: 0.8rem
        background: rgba(255, 255, 255, 1)
        border-radius(0.387rem)
        .search-pic2
          margin-left: 0.213rem
          margin-right: 0.24rem
          wh(0.48rem, 0.48rem)
        .search-name
          wh(80%, 0.6rem)
          size-color(0.373rem, rgba(204, 204, 204, 1))
          line-height: 0.6rem

    .recommend-content-box
      position: fixed
      top: 1.2rem
      wh(100%, auto)
      bottom: 0
      z-index: 88
      background: rgba(242, 242, 242, 1)
      .recommend-content-list
        display: flex
        flex-direction: column
        wh(100%, auto)
        .recommend-content-item
          display: flex
          wh(100%, 1.76rem)
          align-items: center
          background: rgba(255, 255, 255, 1)
          border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
          .company-pic1
            margin-left: 0.32rem
            margin-right: 0.36rem
            wh(1.6rem, 1.2rem)
            border-radius: 0.16rem
            background: #f5f5f5
          .company-pic2
            margin-left: 0.32rem
            margin-right: 0.36rem
            wh(1.6rem, 1.2rem)
            border-radius: 0.16rem
          .company-con-box
            display: flex
            flex-direction: column
            .company-name
              width: 5.8rem
              ellipsis()
              size-color(0.4rem, #333)
              font-weight: 500
              padding-bottom: 0.2rem
            .company-post
              size-color(0.373rem, #3CAFFF)
          .recommend-pic-box
            margin-left: auto
            margin-right: 0.56rem
            .company-pic3
              wh(0.64rem, 0.64rem)
          .recommend-text
            margin-left: auto
            margin-right: 0.56rem
            size-color(0.373rem, rgba(204, 204, 204, 1))
        .recommend-more-box
          text-align: center
          margin-top: 0.64rem
          padding-bottom: 0.8rem
          size-color(0.373rem, rgba(153, 153, 153, 1))
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      z-index: -1
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
